<template>
  <div>
    <!-- <SetupTest></SetupTest> -->
    <!-- <RefTest></RefTest> -->
    <!-- <ComputedTest></ComputedTest> -->
    <!-- <WatchTest></WatchTest> -->

    <!-- <button @click="isShow = !isShow">切换显示/隐藏 {{ isShow }}</button> -->
    <!-- <LifeTest v-if="isShow"></LifeTest> -->
    <!-- <HookTest v-if="isShow"></HookTest> -->
    <!-- <ToRefToRefsTest v-if="isShow"></ToRefToRefsTest> -->
    <!-- <ShallowReactiveShallowRefTest v-if="isShow"></ShallowReactiveShallowRefTest> -->
    <!-- <ReadonlyTest v-if="isShow"></ReadonlyTest> -->
    <!-- <ToRawMarkRawTest v-if="isShow"></ToRawMarkRawTest> -->
    <!-- <CustomRefTest v-if="isShow"></CustomRefTest> -->

    <Father></Father>
  </div>
</template>

<script>
import { ref } from "vue";
import SetupTest from "./components/test01_setup";
import RefTest from "./components/test02_ref_reactive";
import ComputedTest from "./components/test03_computed";
import WatchTest from "./components/test04_watch";
import LifeTest from "./components/test05_life";
import HookTest from "./components/test06_hook";
import ToRefToRefsTest from "./components/test07_toRef_toRefs";
import ShallowReactiveShallowRefTest from "./components/test08_shallowReactive_shallowRef";
import ReadonlyTest from "./components/test09_readonly";
import ToRawMarkRawTest from "./components/test10_toRaw_markRaw";
import CustomRefTest from "./components/test11_customRef";
import Father from "./components/test12_provide_inject/father";

export default {
  name: 'App',
  components: {
    SetupTest,
    RefTest,
    ComputedTest,
    WatchTest,
    LifeTest,
    HookTest,
    ToRefToRefsTest,
    ShallowReactiveShallowRefTest,
    ReadonlyTest,
    ToRawMarkRawTest,
    CustomRefTest,
    Father
  },
  setup() {
    let isShow = ref(true)

    return {
      isShow
    }
  }
}
</script>
